<template>
	<div class="ebook-loading">
		<div class="ebook-loading-wrapper">
			<div v-for="(item,index) in lineArr" :key="index" class="ebook-loading-item">
				<div v-for="(childItem,childIndex) in item" :key="childIndex" class="ebook-loading-line-wrapper">
					<div ref="ebookLine" class="ebook-loading-line"></div>
				</div>
			</div>
			<div class="ebook-loading-center"></div>
		</div>
	</div>
</template>

<script>
	import {pxTorem} from '@/utils/common.js';
	import { ebookMixin } from '../../utils/mixin.js';
	export default {
		mixins:[ebookMixin],
		data() {
			return {
				lineArr: [[{},{},{}],[{},{},{}]],
				lineWidthArr:[{
					value: 0,
					dir: 'up'
				},{
					value: 0,
					dir: 'up'
				},{
					value: 0,
					dir: 'up'
				},{
					value: 0,
					dir: 'up'
				},{
					value: 0,
					dir: 'up'
				},{
					value: 0,
					dir: 'up'
				}]
			}
		},
		methods: {
			
		},
		beforeDestroy() {
			clearInterval(this.withSetInterval)
		},
		mounted() {
			const maxlineWith = 20
			this.withSetInterval = setInterval(()=> {
				this.$refs.ebookLine.forEach((item,index) => {
					const line = this.$refs.ebookLine[index]
					let lineWith = this.lineWidthArr[index]
					let prelineWith = this.lineWidthArr[index - 1] // 上一个item
					if(prelineWith && !lineWith.beginAnimation && prelineWith.value > 3) {
						lineWith.beginAnimation = true
					}
					
					if(lineWith.beginAnimation || index == 0) {
						if(lineWith.dir === 'up' && lineWith.value < maxlineWith) {
							lineWith.value++;
							if(lineWith.value === maxlineWith) {
								lineWith.dir = 'down'
							}
						}else if(lineWith.dir === 'down' && lineWith.value >= 1){
							lineWith.value--;
							if(lineWith.value === 0) {
								lineWith.dir = 'up'
							}
						}
					}

					line.style.width = `${pxTorem(lineWith.value)}`
				})
			},20)
		}
	}
	
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	@import '@/assets/styles/global.scss';
	.ebook-loading {
		position: relative;
		z-index: 400;
		width: pxTorem(70);
		height: pxTorem(40);
		background: transparent;
		border: pxTorem(1) solid #333;
		border-radius: pxTorem(3);
		.ebook-loading-wrapper {
			display: flex;
			width: 100%;
			height: 100%;
			.ebook-loading-item {
				display: flex;
				flex-direction: column;
				flex: 1;
				padding: pxTorem(7) 0;
				box-sizing: border-box;
				.ebook-loading-line-wrapper {
					flex: 1;
					padding: 0 pxTorem(7);
					box-sizing: border-box;
					.ebook-loading-line {
						flex: 0 0 pxTorem(16);
						width: pxTorem(16);
						height: pxTorem(2);
						background: #333;
					}
				}
			}
			.ebook-loading-center {
				position: absolute;
				top: 0px;
				bottom: 0px;
				width: 1px;
				height: 100%;
				background: #333;
				left: 50%;
			}
		}
	}
	
</style>
